.nom-checkbox-list {
  .s-disabled {
    .nom-list-item {
      cursor: not-allowed;
      opacity: 0.7;

      span.checkbox {
        background-color: var(--nom-input-bg-disabled);
        border-color: var(--nom-checkbox-border-color) !important;
      }
    }

    &.nom-list-item {
      .nom-list-item()
    }
  }

  .nom-list-item-wrapper label {
    position: relative;
    display: inline-flex;
    padding-top: @padding-y-base;
    padding-bottom: @padding-y-base;
    font-size: 1rem;
    line-height: @line-height-base;
    cursor: pointer;
    transition: all 0.3s;

    i {
      position: absolute;
      // top: 2px;
      // left: 0;
      display: none;
      width: calc(1rem + 2px);
      height: calc(1rem + 2px);
      margin-top: calc(~'(1em * @{line-height-base} - 1em)/2 + 0px');
      background-color: var(--nom-checkbox-checked-bg);
      border: 1px solid var(--nom-checkbox-checked-border-color);
      border-radius: var(--nom-checkbox-border-radius);
      -webkit-animation: nom-checkbox-keyframe-show .36s ease-in-out backwards;
      animation: nom-checkbox-keyframe-show .36s ease-in-out backwards;
      content: "";
    }

    span.checkbox {
      position: relative;
      z-index: 9;
      width: calc(1rem + 2px);
      min-width: calc(1rem + 2px);
      height: calc(1rem + 2px);
      margin-top: calc(~'(1em * @{line-height-base} - 1em)/2 + 0px');
      margin-right: 0.5em;
      background-color: var(--nom-checkbox-bg);
      border: 1px solid var(--nom-checkbox-border-color);
      border-radius: var(--nom-checkbox-border-radius);
      box-shadow: var(--nom-checkbox-box-shadow);
      transition: all .1s cubic-bezier(.71, -.46, .88, .6);

      &:hover {
        background-color: var(--nom-checkbox-bg-hover);
        border-color: var(--nom-checkbox-checked-border-color);
      }
    }

    &.s-selected {
      span.checkbox {
        background-color: var(--nom-checkbox-checked-bg);
        border-color: var(--nom-checkbox-checked-border-color);

        &:hover {
          background-color: var(--nom-checkbox-checked-bg-hover);
        }

        &::after {
          position: absolute;
          top: 50%;
          left: 50%;
          display: block;
          width: 5px;
          height: 10px;
          margin-top: -6px;
          margin-left: -2px;
          line-height: @line-height-base;
          border: solid var(--nom-checkbox-checker-color);
          border-width: 0 2px 2px 0 !important;
          box-shadow: var(--nom-checkbox-checker-box-shadow);
          // -webkit-transform: rotate(45deg);
          // transform: rotate(45deg);
          -webkit-animation: nom-checkbox-list-keyframe-bounce-in .2s cubic-bezier(.12, .4, .29, 1.46) forwards;
          animation: nom-checkbox-list-keyframe-bounce-in .2s cubic-bezier(.12, .4, .29, 1.46) forwards;
          content: '';
        }
      }

      i {
        display: block;
      }
    }
  }

}

@-webkit-keyframes nom-checkbox-list-keyframe-bounce-in {
  0% {
    -webkit-transform: scale(.6) rotate(45deg);
    transform: scale(.6) rotate(45deg);
    opacity: 0;
  }

  70% {
    -webkit-transform: scale(1.03) rotate(45deg);
    transform: scale(1.03) rotate(45deg);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(1) rotate(45deg);
    transform: scale(1) rotate(45deg);
    opacity: 1;
  }
}

@keyframes nom-checkbox-list-keyframe-bounce-in {
  0% {
    -webkit-transform: scale(.6) rotate(45deg);
    transform: scale(.6) rotate(45deg);
    opacity: 0;
  }

  70% {
    -webkit-transform: scale(1.03) rotate(45deg);
    transform: scale(1.03) rotate(45deg);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(1) rotate(45deg);
    transform: scale(1) rotate(45deg);
    opacity: 1;
  }
}

@-webkit-keyframes nom-checkbox-list-keyframe-show {
  0% {
    transform: scale(1);
    opacity: .5
  }

  to {
    transform: scale(1.7);
    opacity: 0
  }
}

@keyframes nom-checkbox-list-keyframe-show {
  0% {
    transform: scale(1);
    opacity: .5
  }

  to {
    transform: scale(1.7);
    opacity: 0
  }
}
